<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template v-slot:petId="{ row }">
        <el-button
          type="text"
          @click="showPetDetail(row.petId)"
        >
          {{ row.petCode || row.petId }}
        </el-button>
      </template>
      <template v-slot:userName="{ row }">
        <el-button
          type="text"
          @click="showUserInfoDialog(row.userId)"
        >
          {{ row.userName }}
        </el-button>
      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          v-if="
            recordType === ADOPTION_RECORD_TYPE.ADOPTING && !scope.row.director
          "
          type="text"
          @click="showAddDirectorDialog(scope.row)"
        >
          指派负责人
        </el-button>
        <el-button
          v-if="scope.row.director"
          type="text"
          @click="showAddDirectorDialog(scope.row)"
        >
          修改负责人
        </el-button>
        <el-button
          v-if="scope.row.director"
          type="text"
          @click="showChangeLogDialog(scope.row.id)"
        >
          变更记录
        </el-button>
      </template>
    </avue-crud>
    <changeLogDialog
      :id="id"
      v-model="changeLogVisible"
    ></changeLogDialog>
    <petDetailPopup
      :id="petId"
      v-model="petDetailVisible"
    ></petDetailPopup>
    <userInfoDialog
      v-model="userInfoVisible"
      :user-id="userId"
    ></userInfoDialog>
    <addDirectorDialog
      v-model="addDirectorVisible"
      :info="info"
      @onSuccess="getList"
    ></addDirectorDialog>
  </basic-container>
</template>
<script>
import crudMixins from '@/mixins/crud.js';
import { ADOPTION_RECORD_TYPE } from '@/const/type';
import { tableOption } from '@/const/crud/pet/adoptionRecord';
import changeLogDialog from './changeLogDialog.vue';
import { fetchAdoptRecordList } from '@/api/core/adopt';
import petDetailPopup from '@/views/pet/base-file/components/detailPopup.vue';
import userInfoDialog from '@/views/community-content/component/userInfoDialog.vue';
import addDirectorDialog from './addDirectorDialog.vue';

export default {
  components: {
    changeLogDialog,
    petDetailPopup,
    userInfoDialog,
    addDirectorDialog,
  },
  mixins: [crudMixins],
  props: {
    recordType: {
      type: String,
      default: ADOPTION_RECORD_TYPE.ADOPTING,
    },
  },
  data() {
    return {
      ADOPTION_RECORD_TYPE,
      petId: '',
      userId: '',
      info: {},
      id: '',
      changeLogVisible: false,
      petDetailVisible: false,
      userInfoVisible: false,
      addDirectorVisible: false,
    };
  },
  computed: {
    tableOption() {
      return tableOption(this.recordType);
    },
  },
  methods: {
    getList(page, refresh) {
      console.log('refresh', refresh);
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      fetchAdoptRecordList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            status: this.recordType,
          },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records;
          this.page.total = res.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    showChangeLogDialog(id) {
      this.id = id;
      this.changeLogVisible = true;
    },
    //宠物详情
    showPetDetail(id) {
      this.petId = id;
      this.petDetailVisible = true;
    },
    //用户详情
    showUserInfoDialog(id) {
      this.userId = id;
      this.userInfoVisible = true;
    },
    showAddDirectorDialog(row) {
      this.info = row;
      this.addDirectorVisible = true;
    },
  },
};
</script>
